<template>
  <div>
    <tips></tips>
    <van-checkbox-group v-model="result">
      <van-checkbox v-for="item in cartList" :key="item.id" :name="item.product_id" @click="setCartChecked(item)"
                    :disabled="isEditClick">
        <van-swipe-cell>
        <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :desc="item.goods_specifition_name_value"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-stepper v-show="isEditClick" v-model="item.number" @change="stepChange(item)"/>
          </template>
        </van-card>
          <template #right>
            <van-button square text="删除" @click="deleteCartGoods(item.product_id)" type="danger" class="delete-button" style="height: 100%"/>
          </template>
        </van-swipe-cell>

      </van-checkbox>
    </van-checkbox-group>


    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
      <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span>件商品，可点击
        <van-button
            :type="isEditClick? 'danger':'primary'"
            size="mini"
            @click="isEditClick = !isEditClick"
        >{{ isEditClick ? '完成编辑' : '编辑' }}
        </van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {getCartData, setCartChecked,setGoodsNumberStep,deleteCartGoods} from "@/request/api";
import tips from "@/components/tips";

export default {
  name: "Cart",
  components: {
    tips
  },
  data() {
    return {
      result: [],
      checked: false,
      cartList: [],
      cartTotal: [],
      isEditClick: false,
    }
  },
  computed: {
    checkedAll: {
      get() {
        console.log(this.result, this.cartList)
        return this.result.length === this.cartList.length ? true : false
      },
      async set(val) {
        console.log(val)
        if (!this.isEditClick) {
          let tempArr = [];
          this.cartList.map(val => {
            if (val.product_id) {
              tempArr.push(val.product_id)
            }
          })
          console.log(tempArr.join(','))
          const {data: res} = await setCartChecked({
            'isChecked': val ? 1 : 0,
            'productIds': tempArr.join(',')
          });
          if (res.errno == 0) {
            this.totalFn(res)
          }
        } else {
          this.$toast("编辑状态无法切换选项");
        }
      }
    }
  },
  methods: {
    async getCartData() {
      const {data: res} = await getCartData();
      if (res.errno == 0) {
        console.log(res)
        this.totalFn(res)
      }
    },
    async setCartChecked(item) {
      if (!this.isEditClick) {
        const {data: res} = await setCartChecked({
          'isChecked': item.checked == 1 ? 0 : 1,
          'productIds': item.product_id.toString()
        });
        if (res.errno == 0) {
          this.totalFn(res)
        }
      } else {
        this.$toast("编辑状态无法切换选项");
      }
    },
    async deleteCartGoods(product_id){
      console.log(product_id)
      const{data:res} = await deleteCartGoods({
        'productIds':product_id.toString()
      })
      console.log(res)
      if(res.errno == 0){
        this.totalFn(res);
        this.$toast.success('删除成功。')
      }
    },
    onSubmit() {

    },
    onClickEditAddress() {

    },
    async stepChange(item){
      console.log(item)
      const {data:res} = await setGoodsNumberStep({
        'goodsId':item.goods_id,
        'id':item.id,
        'number':item.number,
        'productId':item.product_id
      })
      if(res.errno == 0){
        this.totalFn(res)
      }
    },
    totalFn(res) {
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      this.cartList.map(val => {
        if (val.checked == 1) {
          this.result.push(val.product_id);
        }
      })
    },

  },
  created() {
    this.getCartData();
  }
}
</script>

<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;

  .van-submit-bar__tip {
    display: flex;
    align-items: center;
  }
}

/deep/ .van-checkbox {
  background-color: #fff;
  padding: 2% 2%;
  border-bottom: 1px solid #d0d0d0;

  .van-checkbox__label {
    flex: 1;

    .van-card {
      background-color: #fff;
    }
  }
}
</style>